<template>
  <div class="one-page-table">
    <ElConfigProvider :locale="locale">
      <oHeader :headerOptions="headerOptions" />
      <oSearch :searchOptions="searchOptions" />
      <oTable :tableOptions="tableOptions" />
    </ElConfigProvider>
  </div>
</template>
<script lang="tsx">
import {
  defineComponent,
  ref,
  provide,
  reactive,
  type PropType,
  type ExtractPropTypes,
  unref
} from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import type { SimpleKeyValueObject } from '../form/utils'
import oSearch, { oSearchProps } from './search.vue'
import oTable, { oTableProps } from './table.vue'
import oHeader, { oHeaderProps } from './header.vue'

export const oListProps = {
  ...oHeaderProps,
  ...oSearchProps,
  ...oTableProps
}
export type oListPropsType = ExtractPropTypes<typeof oListProps>

export default defineComponent({
  components: { ElConfigProvider, oHeader, oSearch, oTable },
  props: oListProps,
  setup(props: oListPropsType, context) {
    const formData = reactive({} as SimpleKeyValueObject)
    const eventData = reactive({
      search: false,
      reset: false,
      excel: false,
      reload: false
    })
    const paggingData = reactive({
      currentPage: props.tableOptions!.currentPage || 1,
      pageSize: props.tableOptions!.pageSize || 10,
      pageSizes: props.tableOptions!.pageSize || [10, 50, 100, 300, 500, 800, 1000]
    })
    const tableData = reactive({
      items: [],
      total: 0
    })
    provide('eventData', eventData)
    provide('formData', formData)
    provide('tableData', tableData)
    provide('paggingData', paggingData)
    return {
      locale: zhCn,
      formData,
      headerOptions: props.headerOptions,
      searchOptions: props.searchOptions,
      tableOptions: props.tableOptions
    }
  }
})
</script>
<style lang="scss" scoped></style>
